@charset "utf-8";
@mixin wh($width, $height) {
    width: $width;
    height: $height;
}



//banner
body {
    width: 1280px;
    height: 100%;
    .web {
       width: 100%;
       
       
       .swiper-container {
                height: 545px;
               
            }
             .swiper-slide {
                line-height: 545px;
                text-align: center;
            }
            
        .carou {
            width: 1280px;
            height: 545px;
            position: relative;
            .banner {
                width: 100%;
                position: relative;
            }
            .bannercircle {
                /*绝对定位*/
                position: absolute;
                /*设置定位在父容器50%的位置*/
                left: 50%;
                bottom: 28px;
                /*往左边推自身(ul的宽度)的50%*/
                margin-left: -50px;
                
                li {
                    @include wh(10px, 10px);
                    float: left;
                    padding: 1px;
                    margin-left: 20px;
                    border-radius: 50%;
                    background: #a3d3e9;
                    &:first-of-type {
                        background: #2395cb;
                        margin-left: 0px;
                    }
                }
            }
        }
        //product
        .products {
            width: 100%;
            .product {
                width: 995px;
                margin: 0 auto;
                margin-top: 72px;
                .product_1 {
                    width: 315px;
                    height: 476px;
                    float: left;
                    box-shadow: 3px 3px 8px 3px rgba(227, 227, 227, .6);
                    transition: all 0.6s linear 300ms; 
                    &:hover{
                        transform: translateX(-5px) translateY(-10px);
                    }
                    .product_1bottom {
                        width: 288px;
                        height: 126px;
                        font-size: 15px;
                        line-height: 26px;
                        font-weight: bold;
                        position: relative;
                        margin: 0 auto;
                        ul {
                            width: 288px;
                            position: absolute;
                            left: 15px;
                            top: 24px;
                            white-space: nowrap;
                        }
                    }
                    .product_1center {
                        h3 {
                            font-size: 18px;
                            margin-top: 27px;
                            margin-left: 18px;
                        }
                        .product_1center_content {
                            width: 281px;
                            height: 109px;
                            margin-top: 17px;
                            margin-left: 16px;
                            margin-right: 18px;
                            border-bottom: 2px dotted #dcdcdc;
                            .product_1center_left {
                                width: 111px;
                                height: 98px;
                                float: left;
                            }
                            .product_1center_right {
                                width: 125px;
                                height: 98px;
                                font-size: 15px;
                                line-height: 25px;
                                font-weight: bold;
                                float: right;
                            }
                        }
                    }
                    .product_1top {
                        @include wh(315px, 169px);
                        background: #2395cb;
                        position: relative;
                        .newscenter {
                            position: absolute;
                            left: 50%;
                            top: 14px;
                            margin-left: -58px;
                            width: 116px;
                            height: 124px;
                            font-size: 16px;
                            text-align: center;
                            line-height: 32px;
                            color: white;
                            box-sizing: border-box;
                        }
                        &::after {
                            width: 0;
                            height: 0;
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            bottom: -21px;
                            margin-left: -20.5px;
                            border-top: 21px solid #2395cb;
                            border-left: 20.5px solid transparent;
                            border-right: 20.5px solid transparent;
                        }
                        .shuipingxian1 {
                            width: 100px;
                            height: 30px;
                            border-top: 1px solid #FFFFFF;
                            position: absolute;
                            left: 108px;
                            bottom: 0;
                        }
                    }
                }
                .product_2 {
                    width: 315px;
                    height: 476px;
                    float: left;
                    margin-left: 16px;
                    margin-right: 14px;
                    box-shadow: 3px 3px 8px 3px rgba(227, 227, 227, .6);
                    transition: all 0.6s linear 300ms; 
                    &:hover{
                        transform: translateX(-5px) translateY(-10px);
                    }
                    .product_2bottom {
                        margin-top: 32px;
                        text-align: center;
                        h2 {
                            font-size: 14px;
                            color: #2395cb;
                            line-height: 34px;
                        }
                        p {
                            font-size: 12px;
                            font-weight: bold;
                        }
                    }
                    .product_2center {
                        width: 315px;
                        height: 140px;
                        margin-top: 56px;
                        .swiper-container {
                height: 140px;
            }
            
            .swiper-slide {
                line-height: 140px;
                text-align: center;
            }
            .swiper-button-next{background-image:url(../img/next.png);}
            .swiper-button-prev{background-image:url(../img/prev.png);}
                        
                        
//                      .product_2center-1 {
//                          float: left;
//                          margin-left: 12px;
//                          margin-top: 75px;
//                      }
//                      .product_2center-2 {
//                          float: left;
//                          margin-left: 10px;
//                          margin-right: 10px;
//                      }
//                      .product_2center-3 {
//                          float: right;
//                          margin-right: 12px;
//                          margin-top: 75px;
//                      }
                    }
                    .product_2top {
                        width: 315px;
                        height: 169px;
                        background: #3ed1a4;
                        position: relative;
                        .shuipingxian2 {
                            width: 108px;
                            height: 30px;
                            border-top: 1px solid #FFFFFF;
                            position: absolute;
                            left: 114px;
                            bottom: 0;
                        }
                        &::after {
                            width: 0;
                            height: 0;
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            bottom: -21px;
                            margin-left: -20.5px;
                            border-top: 21px solid #3ed1a4;
                            border-left: 20.5px solid transparent;
                            border-right: 20.5px solid transparent;
                        }
                        .newscenter1 {
                            position: absolute;
                            left: 50%;
                            top: 14px;
                            margin-left: -58px;
                            width: 135px;
                            height: 124px;
                            font-size: 16px;
                            text-align: center;
                            line-height: 32px;
                            color: white;
                            box-sizing: border-box;
                        }
                    }
                }
                .product_3 {
                    width: 315px;
                    height: 476px;
                    float: left;
                    box-shadow: 3px 3px 8px 3px rgba(227, 227, 227, .6);
                    transition: all 0.6s linear 300ms; 
                    &:hover{
                        transform: translateX(-5px) translateY(-10px);
                    }
                    .product_3bottom {
                        width: 308px;
                        height: 76px;
                        background: url(../img/product_3bottom.png);
                        margin: 30px auto;
                        position: relative;
                        p {
                            position: absolute;
                            width: 216px;
                            height: 34px;
                            font-weight: bold;
                            font-size: 12px;
                            top: 29px;
                            left: 47px;
                            line-height: 22px;
                        }
                    }
                    .product_3center {
                        width: 289px;
                        height: 125px;
                        margin: 45px auto;
                    }
                    .product_3top {
                        width: 315px;
                        height: 169px;
                        background: #895ea3;
                        position: relative;
                        .newscenter {
                            position: absolute;
                            left: 50%;
                            top: 14px;
                            margin-left: -58px;
                            width: 116px;
                            height: 124px;
                            font-size: 16px;
                            text-align: center;
                            line-height: 32px;
                            color: white;
                            box-sizing: border-box;
                        }
                        .shuipingxian3 {
                            width: 100px;
                            height: 30px;
                            border-top: 1px solid #FFFFFF;
                            position: absolute;
                            left: 108px;
                            bottom: 0;
                        }
                        &::after {
                            width: 0;
                            height: 0;
                            content: "";
                            display: block;
                            position: absolute;
                            left: 50%;
                            bottom: -21px;
                            margin-left: -20.5px;
                            border-top: 21px solid #895ea3;
                            border-left: 20.5px solid transparent;
                            border-right: 20.5px solid transparent;
                        }
                    }
                }
            }
        }
        .aboutustitle {
            width: 257px;
            height: 42px;
            border-bottom: 1px solid #c9c9c9;
            margin: 0 auto;
            text-align: center;
            position: relative;
            margin-top: 54px;
            margin-bottom: 56px;
            .aboutustitlecontent {
                position: absolute;
                width: 108px;
                background: #FFFFFF;
                left: 75px;
                bottom: -8px;
                h3 {
                    font-size: 20px;
                    line-height: 32px;
                }
                h5 {
                    font-size: 12px;
                    color: #a0a0a0;
                }
            }
        }
        .aboutus {
            width: 100%;
            min-width: 1280px;
            height: 343px;
            background: url(../img/aboutusbg.png);
            .jianjiecontent {
                width: 86%;
                padding-top: 49px;
                padding-bottom: 39px;
                margin: 0 auto;
                #jianjie {
                    width: 100%;
                    text-align: center;
                    font-size: 18px;
                    line-height: 26px;
                    text-indent: 4px;
                    color: #3d3d3d;
                }
                #jianjieneirong {
                    width: 104%;
                    text-align: center;
                    font-size: 18px;
                    line-height: 26px;
                    color: #3d3d3d;
                }
            }
            .aboutproductph {
                width: 82%;
                height: 167px;
                background: #FFFFFF;
                margin: 0 auto;
                
                li { float:left; padding-right:15px;margin-top: 5px;}
                
                
//              .swiper-container1{
//                  width: 1050px;
//                  height: 167px;
//                  overflow: hidden;
//                 
//              }
//               .swiper-slide {
//                      width: 280px;
//                      height: 160px;
//                      line-height: 160px;
//                      margin-top: 5px;  
//                          
//          }
                
//              .aboutusph1 {
//                  width: 49px;
//                  height: 159px;
//                  float: left;
//                  margin-top: 5px;
//                  margin-left: 5px;
//              }
//              .aboutusph5 {
//                  width: 49px;
//                  height: 159px;
//                  float: left;
//                  margin-top: 5px;
//                  margin-right: 4px;
//                  margin-left: 18px;
//              }
//              .aboutusph2,
//              .aboutusph3,
//              .aboutusph4 {
//                  width: 282px;
//                  height: 159px;
//                  float: left;
//                  margin-left: 18px;
//                  margin-top: 5px;
//              }
            }
        }
        .contactustitle {
            width: 100%;
            height: 106px;
            background: #f6f6f6;
            .contactustitle-1 {
                width: 257px;
                height: 42px;
                border-bottom: 1px solid #c9c9c9;
                margin: 0 auto;
                text-align: center;
                position: relative;
                padding-top: 33px;
                .contactustitlecontent {
                    position: absolute;
                    width: 108px;
                    background: #f6f6f6;
                    left: 75px;
                    bottom: -8px;
                    h3 {
                        font-size: 20px;
                        line-height: 32px;
                    }
                    h5 {
                        font-size: 12px;
                        color: #a0a0a0;
                    }
                }
            }
        }
        .contact {
            width: 100%;
            height: 540px;
            box-sizing: border-box;
            padding-top: 52px;
            padding-left: 106px;
            padding-right: 100px;
            .contact-left {
                float: left;
                .contact-left-top {
                    width: 440px;
                    .contact-left-top-left {
                        width: 138px;
                        height: 186px;
                        border: 1px solid #ebebeb;
                        text-align: center;
                        float: left;
                        #erweima {
                            width: 126px;
                            height: 125px;
                            margin: 0 auto;
                            padding-top: 7px;
                        }
                        .weixin {
                            margin-top: 9px;
                            font-size: 13px;
                            line-height: 20px;
                            font-weight: bold;
                        }
                    }
                    .contact-left-top-right {
                        line-height: 32px;
                        font-size: 16px;
                        float: right;
                        color: #c1c1c1;
                        .smallicon {
                            width: 28px;
                            height: 24px;
                        }
                    }
                }
                .contact-left-bottom {
                    .ditu {
                        width: 426px;
                        height: 195px;
                        margin-top: 38px;
                    }
                }
            }
            .contact-right {
                float: right;
                p {
                    font-size: 14px;
                    line-height: 36px;
                }
                input[type="text"],
                input[type="email"] {
                    width: 603px;
                    height: 34px;
                    border: 1px dotted #d4d2d2;
                    background: #f9f8f8;
                    text-indent: 4px;
                    &:focus{
                        border: 1px solid skyblue;
                    }
                }
          
                #content {
                    width: 603px;
                    height: 120px;
                    border: 1px dotted #d4d2d2;
                    background: #f9f8f8;
                    text-indent: 4px;
                     &:focus{
                        border: 1px solid skyblue;
                    }
                }
                #submit {
                    display: inline-block;
                    margin-top: 20px;
                    width: 94px;
                    height: 30px;
                    background: #3c9cd3;
                    color: white;
                }
            }
        }

    }
}
